<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      对于很长的页面，可以对应的标签添加 id属性，将它变成页面的 "锚点"
      当点击锚点连接时，浏览器地址栏就会出现 #id属性名称 页面就会自动滚动到锚点处
      从其他页面页面点击带#号的链接，就可以直接定位到锚点位置
     -->
    <!-- 在 HTML5 中 直接使用 #top即可回到顶部，不用定义 id="top" -->
    <h1>页面锚点链接</h1>

    <p>
      <a href="#phone">小米手机</a> &nbsp;&nbsp;&nbsp;
      <a href="#zn">智能穿戴</a> &nbsp;&nbsp;&nbsp;
      <a href="#jd">家电</a> &nbsp;&nbsp;&nbsp;
      <a href="#sh">生活电器</a> &nbsp;&nbsp;&nbsp;
      <a href="#cf">厨房电器</a> &nbsp;&nbsp;&nbsp;
      <a href="#jj">智能家居</a> &nbsp;&nbsp;&nbsp;
      <a href="#cx">出行搭配</a> &nbsp;&nbsp;&nbsp;
      <a href="#bh">日用百货</a>
    </p>

    <h2 id="phone">小米手机</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="zn">智能穿戴</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="jd">家电</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="sh">生活电器</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="cf">厨房电器</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="jj">智能家居</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="cx">出行搭配</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <h2 id="bh">日用百货</h2>
    <img src="./海绵宝宝.jpg" alt="" />

    <p>
      <a href="#top">回到顶部</a>
    </p>
  </body>
</html>
